<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Wi-Fi Car</title>
<style>
body {
	margin: 0;
	padding: 0;
	font: 12px/1.5 arial;
	text-align:center;
	height:100%;
	width:100%;
}
img {
	max-width: 100%;
	max-height: 100%;
	margin:2px;
	border-radius: 6px;
}
a {
	text-decoration:none;
}
#header {
	background-color:black;
	color:white;
	margin:2% 0 0 0;
	padding:5px;
}
#section {
	width:80%;
	margin:0 auto;
	padding:10px;
}
#footer {
	background-color:black;
	font-size:medium;
	color:white;
	clear:both;
	padding:5px;
	position: fixed;
	bottom:0;
	min-width:100%;
}
#counter {
	position:absolute;
	max-height: 50%;
	max-width:50%;
	right: 5%;
	border: 0;
}
</style>
<script>
function postAction(action)
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        }
    }
    xmlhttp.open("GET","./"+action, true); // 在此处修改文件路径
    xmlhttp.send();
}
</script>
</head>

<body onload="updateEnvData()">
<div id="header">
	<h1>Wi-Fi Car</h1>
</div>
<div id="section">
	<img src="./go.png" onmouseover="postAction('go')">
	<br/>
	<img src="./left.png" onmouseover="postAction('left')">
	<img src="./left.png" style="visibility:hidden;">
	<img src="./right.png" onmouseover="postAction('right')">
	<br/>
	<img src="./back.png" onmouseover="postAction('back')">
</div>
<br/><br/><br/>
<div id="footer">
	© 2018.07.25 HaydnLiao
</div>
</body>
</html>

